<template>
  <main class="bloghome grid grid-cols-10 box-border gap-4 p-6">
    <!-- 这里是左侧边栏 -->
    <sidebar class="bloghome_left col-span-1">
      <el-card class="blog_card min-h-1/2">
        <!-- 开始渲染推介列表页面 -->
        <ul>
          <li v-for="(item,index) of recommandList" :key="index" @click="recommandClick(item.id)" class="text-center h-8 transition duration-500 ease-in-out hover:font-bold">
            {{item.label}}
          </li>
        </ul>
      </el-card>
    </sidebar>
    <!-- 这里是内容区 -->
    <section class="bloghome_content col-span-7">
      <el-card class="blog_card h-full">
        <!-- 开始渲染博客列表页面 -->
        <ul>
          <li v-for="(item,index) of blogList" :key="index" @click="blogClick(item.id)" class="w-full h-32 grid grid-cols-10 border-b-2 border-gray-100 mt-1">
            <!-- 内容部分 -->
            <section class="blogitem_content col-span-8 flex-col p-2 gap-1">
              <!-- 这里是标题 -->
              <section class="blogitem_content_title flex-grow h-1/5 font-bold">{{item.title}}</section>
              <!-- 这里是描述 -->
              <section class="blogitem_content_desc flex-shrink-1 h-2/5 mt-1">{{item.desc}}</section>
              <!-- 这里是博客条目下角标 -->
              <section class="blogitem_content_bottom flex flex-row w-full mt-3 h-1/5 gap-4">
                <!-- 这里是作者名字 -->
                <section class="flex items-center content-center justify-center"> {{item.author}}</section>
                <!-- 这里是博客日期 -->
                <section class="flex items-center content-center justify-center">
                  <el-icon>
                    <Dish />
                  </el-icon>{{item.date}}
                </section>
                <!-- 这里是博客评论数目 -->
                <section class="flex items-center content-center justify-center">
                  <el-icon>
                    <Dish />
                  </el-icon>{{item.comment}}
                </section>
                <!-- 这里是博客阅读数目 -->
                <section class="flex items-center content-center justify-center">
                  <el-icon>
                    <Dish />
                  </el-icon>{{item.read}}
                </section>
              </section>
            </section>
            <!-- 封面部分 -->
            <section class="blogitem_cover col-span-2 ">
              <!-- 这里只有一张封面图片 -->
              <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e7d37251bc04bf48caafe62eae2991e~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?" alt="cover" class="w-full h-4/5">
            </section>
          </li>
        </ul>
        <!-- 分页模块开始 -->
        <section class="flex items-center justify-center content-center mt-16">
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </section>
      </el-card>
    </section>
    <!-- 这里是右侧边栏 -->
    <sidebar class="bloghome_right col-span-2">
      <el-card class="blog_card min-h-1/2">
        <!-- 开始渲染右侧列表页面 -->
        <template #header>
          <span class="font-bold text-lg">热门阅读</span>
        </template>
        <!-- 这里开始渲染热门博客列表 -->
        <ul>
          <li v-for="(item,index) of recommandBlogList" :key="index" class="recommanditem h-12 grid grid-cols-10 text-base">
            <!-- 这里是排名显示 -->
            <section class="recommanditem_index col-span-1 flex justify-center items-center content-center">
              <img src="/img/c1.png" alt="冠军" class="h-8 w-8" v-if="index==0">
              <img src="/img/c3.png" alt="亚军" class="h-8 w-8" v-else-if="index==1">
              <img src="/img/c2.png" alt="季军" class="h-8 w-8" v-else-if="index==2">
              <span class="font-bold" v-else>{{index+1}}</span>
            </section>
            <!-- 这里是排名内容 -->
            <section class="recommanditem_content col-span-9 flex flex-row justify-around p-2 content-center">
              <!-- 这里是标题 -->
              <section class="flex justify-center items-center content-center ml-2">{{item.title}}</section>
              <!-- 这里是阅读量 -->
              <section class="flex justify-center items-center content-center ml-6 text-sm">
                <el-icon>
                  <Dish />
                </el-icon>
                {{item.read}}
              </section>
            </section>
          </li>
        </ul>
      </el-card>
      <el-card class="blog_card h-1/2 mt-4">
        <!-- 开始渲染右侧列表页面 -->
        <template #header>
          <span class="font-bold text-lg">官方博客</span>
        </template>
        <!-- 这里开始渲染官方博客列表 -->
        <ul>
          <li v-for="(item,index) of officialBlogList" :key="index" class="officalitem recommanditem h-20 grid grid-cols-10 text-base">
            <!-- 这里是官方号封面 -->
            <section class="officalitem_cover col-span-2 flex flex-row justify-center content-center items-center">
              <img :src="item.cover" class="h-16 w-16">
            </section>
            <!-- 这里是官方号关注按钮 -->
            <section class="officalitem_btn col-span-8 flex flex-col items-center justify-around content-center">
              <!-- 这里是官方号标题 -->
              <section class="">{{item.name}}</section>
              <!-- 这里是官方号关注按钮 -->
              <section class="mb-2">
                <el-button type="success" size="small" :icon="Plus" plain>
                  关注
                </el-button>
              </section>
            </section>
          </li>
        </ul>
      </el-card>
    </sidebar>
  </main>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {
    Dish,
    Plus
} from '@element-plus/icons-vue'
const recommandList=ref([
    {
        id: 1,
        label: '推荐'
    },
    {
        id: 2,
        label: '动态'
    },
    {
        id: 3,
        label: '排行榜'
    },
    {
        id: 4,
        label: 'Python'
    },
    {
        id: 5,
        label: 'Java'
    },
    {
        id: 6,
        label: '人工智能'
    },
    {
        id: 7,
        label: '前端'
    },
    {
        id: 8,
        label: '架构'
    },
    {
        id: 9,
        label: '区块链'
    },
    {
        id: 10,
        label: '数据库'
    },
    {
        id: 11,
        label: '5G技术'
    },
    {
        id: 12,
        label: '游戏开发'
    },
    {
        id: 13,
        label: '运维'
    },
    {
        id: 14,
        label: '网络安全'
    },
    {
        id: 15,
        label: '云计算'
    },
    {
        id: 16,
        label: '大数据'
    },
    {
        id: 17,
        label: '研发管理'
    },
    {
        id: 18,
        label: '物联网'
    },
    {
        id: 19,
        label: '计算机基础'
    },
])
const blogList=ref([
    {
        id: 1,
        title: '鸿蒙OS起步照着官网练习创建第一页面和第二页面需要注意的点',
        desc: '弹性伸缩具有应突发，省成本，自动化的业务价值，平台将由业务零散、闲置资源进行整合，形成一个大规模的资源池。通过弹性伸缩。库管技术在公司运营陈本和业务体感中找到比较好的平衡',
        cover: '#',
        author: '微信云开发',
        date: '2021-03-24',
        comment: 1024,
        like: 1394,
        read: 1300,
    },
    {
        id: 2,
        title: '鸿蒙OS起步照着官网练习创建第一页面和第二页面需要注意的点',
        desc: '弹性伸缩具有应突发，省成本，自动化的业务价值，平台将由业务零散、闲置资源进行整合，形成一个大规模的资源池。通过弹性伸缩。库管技术在公司运营陈本和业务体感中找到比较好的平衡',
        cover: '#',
        author: '微信云开发',
        date: '2021-03-24',
        comment: 1024,
        like: 1394,
        read: 1300,
    },
    {
        id: 3,
        title: '鸿蒙OS起步照着官网练习创建第一页面和第二页面需要注意的点',
        desc: '弹性伸缩具有应突发，省成本，自动化的业务价值，平台将由业务零散、闲置资源进行整合，形成一个大规模的资源池。通过弹性伸缩。库管技术在公司运营陈本和业务体感中找到比较好的平衡',
        cover: '#',
        author: '微信云开发',
        date: '2021-03-24',
        comment: 1024,
        like: 1394,
        read: 1300,
    },
    {
        id: 4,
        title: '鸿蒙OS起步照着官网练习创建第一页面和第二页面需要注意的点',
        desc: '弹性伸缩具有应突发，省成本，自动化的业务价值，平台将由业务零散、闲置资源进行整合，形成一个大规模的资源池。通过弹性伸缩。库管技术在公司运营陈本和业务体感中找到比较好的平衡',
        cover: '#',
        author: '微信云开发',
        date: '2021-03-24',
        comment: 1024,
        like: 1394,
        read: 1300,
    },
    {
        id: 5,
        title: '鸿蒙OS起步照着官网练习创建第一页面和第二页面需要注意的点',
        desc: '弹性伸缩具有应突发，省成本，自动化的业务价值，平台将由业务零散、闲置资源进行整合，形成一个大规模的资源池。通过弹性伸缩。库管技术在公司运营陈本和业务体感中找到比较好的平衡',
        cover: '#',
        author: '微信云开发',
        date: '2021-03-24',
        comment: 1024,
        like: 1394,
        read: 1300,
    },
    {
        id: 6,
        title: '鸿蒙OS起步照着官网练习创建第一页面和第二页面需要注意的点',
        desc: '弹性伸缩具有应突发，省成本，自动化的业务价值，平台将由业务零散、闲置资源进行整合，形成一个大规模的资源池。通过弹性伸缩。库管技术在公司运营陈本和业务体感中找到比较好的平衡',
        cover: '#',
        author: '微信云开发',
        date: '2021-03-24',
        comment: 1024,
        like: 1394,
        read: 1300,
    }
])
const recommandBlogList=ref([
    {
        id: 1,
        read: 10086,
        title: '微信小程序开发者教程'
    },
    {
        id: 2,
        read: 10086,
        title: '微信小程序开发者教程'
    },
    {
        id: 3,
        read: 10086,
        title: '微信小程序开发者教程'
    },
    {
        id: 4,
        read: 10086,
        title: '微信小程序开发者教程'
    },
    {
        id: 5,
        read: 10086,
        title: '微信小程序开发者教程'
    },
    {
        id: 6,
        read: 10086,
        title: '微信小程序开发者教程'
    },
    {
        id: 7,
        read: 10086,
        title: '微信小程序开发者教程'
    }
])
const officialBlogList=ref([
    {
        id: 1,
        name: '自由编程协会官方号',
        cover: 'logo.png'
    }
])
const recommandClick=(index):void=>{
    console.log(index)
}
const blogClick=(index):void=>{
    console.log(index)
}
</script>
<style lang="scss" scoped>
.bloghome{
    min-height: 60rem;
}
</style>